<div class="wrapper">

	<section class="" id="load-data">

		<div class="container">

			<div class="row">

					<div class="col-lg-2">

						<h3 id="data">Load your data
							<!--<button type="button"
								class="choose btn btn-default"
								ng-model="sample"
								placeholder="or choose one of our samples"
								ng-options="s as s.title for s in samples" bs-select>
							</button>-->

						</h3>

					</div>

					<div class="col-lg-10">
						<h3><span ng-show="parsed && text.length" class="small text-mono">{{fileName | decodeUrl}}</span>
							<span class="list-type pull-right" ng-show="data.length">
								<i class="type fa fa-align-left breath-left"
								data-toggle="tooltip"
								data-title="View as Text"
								ng-click="dataView='text'" ng-class="{selected:dataView!='table'}"></i>
								<i class="type fa fa-table breath-left"
								data-toggle="tooltip"
								data-title="View as Table"
								ng-click="dataView='table'" ng-class="{selected:dataView=='table'}"></i>
							</span>
							<span class="clearfix"></span>
						</h3>
					</div>

				</div>


			<div class="row">

					<div class="col-lg-2">

						<ul class="nav nav-pills nav-stacked nav-pills-stacked-example">
							<li role="presentation" ng-class="{active:!parsed && importMode=='clipboard'}"><a href="#" ng-click="parsed=false;importMode='clipboard'"><i class="fa fa-clipboard breath-right"></i>Paste</a></li>
				      <li role="presentation" ng-class="{active:!parsed && importMode=='file'}"><a href="#" ng-click="parsed=false;importMode='file'"><i class="fa fa-file-text breath-right"></i>Upload a file</a></li>
				      <li role="presentation" ng-class="{active:!parsed && importMode=='url'}"><a href="#" ng-click="parsed=false;importMode='url'"><i class="fa fa-cloud breath-right"></i>From URL</a></li>
							<li role="presentation" ng-class="{active:!parsed && importMode=='sample'}"><a href="#" ng-click="parsed=false;importMode='sample'"><i class="fa fa-gift breath-right"></i>Try our samples</a></li>
				    </ul>

					</div>

					<div class="col-lg-10">

						<!-- Clipboard -->
						<div ng-show="importMode=='clipboard' && !json && !parsed">
							<textarea ui-codemirror="{lineWrapping : true,   dragDrop : false}" class="text-clipboard margin-bottom" ng-model="clipboardText" placeholder="Paste your data here from other applications"></textarea>
							<p class="help-block">Copy and paste your data from other applications or websites. You can use tabular (TSV, CSV, DSV) or JSON data<p>

						</div>

						<!-- File -->
						<div ng-show="importMode=='file'&& !json && !parsed">

							<div ngf-drop ngf-select ng-model="files" class="drop-box margin-bottom" ngf-drag-over-class="dragover" ngf-multiple="false" ngf-allow-dir="false" ng-show="!worksheets.length">
								<a>Drag a file here or click to select a file from your computer</a>
							</div>

							<p ng-show="!worksheets.length" class="help-block">You can upload TSV, CSV, DSV, JSON and Excel files (.xls, .xlsx). Spreadsheet files with multiple sheets are fine too.</p>

							<div class="row">
								<div class="col-lg-3" ng-repeat="worksheet in worksheets" ng-click="parse(worksheet.text)">
									<div class="layout">
										<div class="layout-inner">
											<span>{{worksheet.name}}</span>
											<span class="text-muted layout-category">{{worksheet.rows}} rows</span>
										</div>
									</div>
								</div>
							</div>

							<p ng-show="worksheets.length" class="help-block">Your file contains multiple sheets. Please choose one from above.</p>

						</div>

						<!-- URl -->
						<div ng-show="importMode=='url' && !json && !parsed">
							<input type="text" class="form-control margin-bottom" ng-model="url" placeholder="http://" ng-show="!worksheets.length"></input>
							<p class="help-block">Enter a web address (URL) pointing to the data (e.g. a public Dropbox file, a public API, ...). Please, be sure the server is CORS-enabled.<p>

							<div data-ng-show="loading" class="alert alert-loading"><i class="fa breath-right fa-refresh fa-spin"></i>Loading your data. Please wait.</div>

							<div class="row">
								<div class="col-lg-3" ng-repeat="worksheet in worksheets" ng-click="parse(worksheet.text)">
									<div class="layout">
										<div class="layout-inner">
											<span>{{worksheet.name}}</span>
											<span class="text-muted layout-category">{{worksheet.rows}} rows</span>
										</div>
									</div>
								</div>
							</div>

							<p ng-show="worksheets.length" class="help-block">Your file contains multiple sheets. Please choose one from above.</p>

						</div>

						<!-- Default -->
						<div ng-show="parsed">

							<div data-ng-show="dataView != 'table'">
								<div class="parsed">
									<textarea ui-codemirror="codeMirrorOptions" ng-model="text"></textarea>
								</div>
							</div>

							<div raw-table class="data-table" data-ng-show="dataView == 'table'"></div>


						</div>

						<div class="json-viewer margin-bottom" json-viewer json="json" ng-show="json" on-select="antani"></div>

						<p ng-show="json" class="help-block">Please select the array <strong>[ ]</strong> containing the records you want to load from the JSON above.</p>

						<!-- Sample -->
						<div ng-show="importMode=='sample' && !parsed">
							<div class="row">
								<div class="col-lg-3" ng-repeat="s in samples | orderBy : 'type'" ng-click="selectSample(s)">
									<div class="layout">
										<div class="layout-inner">
											<span>{{s.title}}</span>
											<span class="text-muted layout-category">{{s.type}}</span>
										</div>
									</div>
								</div>
							</div>
						</div>

						<div>
							<!--<div data-ng-show="!loading && !data.length && !error" class="alert"><i class="fa fa-hand-o-right breath-right"></i> Not sure how this works? <a href="http://raw.densitydesign.org/how-it-works/">Take a look at this video</a> or <a href="https://github.com/densitydesign/raw/wiki/FAQs">visit our FAQs</a></div>-->
							<div data-ng-show="!loading && !error && data.length && parsed" class="alert alert-success"><i class="fa fa-thumbs-up breath-right"></i><strong>{{data.length}}</strong> records in your data have been successfully parsed!</div>
							<div data-ng-show="!loading && error" class="alert alert-warning"><i class="fa fa-thumbs-down breath-right"></i><strong>Whoops! </strong>{{error}}</div>
							<div data-ng-show="loading && text.length" class="alert alert-loading"><i class="fa breath-right fa-refresh fa-spin"></i>Loading your data. Please wait.</div>
						</div>

						<div ng-show="parsed">

							<div class="pull-right">

								<p ng-show="pivot<=0 && !unstacked">Your data seems unstacked. <a ng-click="unstacking=true">Click here to stack it</a></p>
								<p class="text-muted" ng-show="pivot>0 && !unstacked">Your data seems ready to go. But if you want to stack it anyway, <a ng-click="unstacking=true">click here</a></p>
								<p ng-show="unstacked">Data is stacked now. <a ng-click="stack()">Click here to revert to your original data</a></p>
								<div ng-show="unstacking" class="pull-right">
									<button
										class="btn btn-default"
										ng-model="stackDimension"
										ng-change="unstack();unstacking=false"
										placeholder="Select a dimension to stack on"
										bs-options="dimension.key for dimension in metadata" bs-select>
									</button>
								</div>

							</div>

							<!--<a ng-show="!unstacked" ng-click="unstack()" class="btn btn-default">Stack data</a>
							<a ng-show="unstacked" ng-click="stack()" class="pull-right">Unstack data<i class="fa fa-toggle-on breath-left"></i></a>-->



						</div>




					</div>

			</div>



		</div>

		</section>

		<section data-ng-show="error">

			<div class="container">
				<h2><strong>Ouch.</strong> It seems like RAW encountered some problems while parsing your data. Please, be sure everything is ok with your data. Often this is due to some missing delimiters. If you want to use a <a href="http://en.wikipedia.org/wiki/Delimiter">delimiter char</a> as string literal, please include it in double quotes. See our <a href="https://github.com/densitydesign/raw/wiki/FAQs#raw-says-there-is-something-wrong-with-my-data">FAQs</a> for more information.</h2>
			</div>

		</section>


		<section class="dark" data-ng-show="!error && data.length && parsed">

			<div class="container">

				<div>

					<h3 id="layout">
						Choose a Chart
					</h3>


					<div class="row">

						<div class="col-lg-3 col-md-4">
							<div class="row">
								<div class="col-lg-12 col-md-12">
									<div class="chart-description">
										<h4>{{chart.title()}}</h4>
										<span class="text-muted">{{chart.category()}}</span>
										<div class="row">
											<div class="col-lg-12 col-md-12 col-sm-6 col-xs-12">
												<div class="chart-thumb" ng-style="{'background-image':'url(' + chart.thumbnail() + ')'}"></div>
											</div>
											<div class="col-lg-12 col-md-12 col-sm-6 col-xs-12">
												<p class="light" ng-bind-html="chart.description()"></p>
												<p class="light" data-ng-show="!chart.description()">No description given</p>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>

						<div class="col-lg-9 col-md-8">
								<div class="row">
									<div class="col-lg-3 col-md-4 col-sm-4 col-xs-6" ng-repeat="c in charts">
										<div ng-class="{selected: c == chart}" class="layout"  ng-click="selectChart(c)">
											<div class="layout-thumb" ng-style="{'background-image':'url(' + c.thumbnail() + ')'}"></div>
											<p class="layout-inner" >
												<span class="layout-title">{{c.title()}}</span>
												<span class="text-muted layout-category">{{c.category() || 'Other'}}</span>
											</p>
											<div class="layout-check">
													<i class="fa fa-check"></i>
												</div>
										</div>
									</div>

									<div class="col-lg-3 col-md-4 col-sm-4 col-xs-6">
										<a href="https://github.com/densitydesign/raw/wiki/Adding-New-Charts" target="_blank">
											<div class="layout yours">
												<div class="layout-thumb">
													<i class="fa fa-plus"></i>
												</div>

												<p class="layout-inner" >
													<span class="layout-title">Custom</span>
													<span class="text-muted layout-category">Add your charts!</span>
												</p>
											</div>
										</a>

								</div><!-- end of group -->

							</div>



						</div>

					</div>


				</div>

			</div>

		</section>

		<section class="" data-ng-show="!error && data.length && parsed">

			<div class="container">

				<div id="mapping" class="row-fluid">

					<div>
						<h3>Map your Dimensions
							<a data-toggle="tooltip"
							data-title="Clear all"
							ng-click="model.clear()" class="pull-right light"><i class="fa fa-trash-o"></i></a>
							<span class="clearfix"></span>
						</h3>
						<!--<p class="help-block">Drag your into </p>-->
					</div>


					<div class="row">

						<div class="col-lg-3 col-md-3 col-sm-6">
							<div draggable>
								<ul class="list-unstyled dimensions-list">
									<li class="dimension" data-dimension="{{dimension}}" ng-repeat="dimension in metadata track by $index">
										<span class="dimension-key">{{ dimension.key }}</span>
										<span class="dimension-type">{{dimension.type}}</span>
										<span class="dimension-icon pull-right"><i class="fa fa-arrow-right"></i></span>
									</li>
								</ul>
							</div>
						</div>

						<div class="col-lg-9 col-md-9 col-sm-6 mapping">
							<div class="sticky">
								<div
								class="row"
								group every="3"
								watch="model">

								<div
								class="col-lg-4 col-md-4 dimensions-wrapper"
								ng-repeat="dimension in model.dimensions().values() track by $index" ng-init="open=false">

								<div class="dimensions-model">

									<!--<div class="dimension-multiple">

										<i class="fa fa-tag"
										data-toggle="tooltip"
										data-title="You can drag only one dimension here"
										data-ng-show="!dimension.multiple()"></i>

										<i class="fa fa-tags"
										data-toggle="tooltip"
										data-title="You can drag more than one dimension here"
										data-ng-show="dimension.multiple()"></i>
									</div>-->

									<i class="fa fa-tags"
									data-toggle="tooltip"
									data-title="You can drag more than one dimension here"
									data-ng-show="dimension.multiple()"></i>

									<i class="fa fa-asterisk dimension-required"
										data-toggle="tooltip"
										data-title="Required"
										data-ng-show="dimension.required()"></i>

									<!--<a class="dimension-info"
									data-toggle="tooltip"
									data-title="Show description"
									ng-click="open = !open" ng-show="dimension.description()">
									<i class="fa fa-info dimension-info-toggle"></i>
									</a>-->

								<p class="dimension-title">{{dimension.title()}}</p>
								<ul
									sortable
									title="dimension.title()"
									value="dimension.value"
									multiple="dimension.multiple()"
									types="dimension.types()"
									class="dimensions-container list-unstyled">
								</ul>

						</div>

					</div>

				</div>
			</div>

		</div>

	</div>

</div>


</div>

</section>

<section class="dark" data-ng-show="!error && data.length && parsed">

	<div class="container">

		<h3 id="options">
			Customize your Visualization
		</h3>

		<div class="row">

			<div class="col-lg-3">
				<ul class="list-unstyled">
					<li ng-repeat="option in chart.options() track by $index" chart-option>
						<p class="option-title text-capitalize">
							{{option.title()}}
							<a data-ng-show="option.fitToWidth()"
							data-toggle="tooltip"
							data-title="Fit to width"
							class="option-fit pull-right"><i class="fa fa-expand"></i></a>
						</p>

						<div ng-switch="" on="option.type()">
							<input type="number" min="0" class="form-control" ng-model="option.value" ng-switch-when="number"></input>

							<div ng-switch-when="checkbox">
								<label class="">
									<input type="checkbox" ng-model="option.value"/>
								</label>
							</div>

							<div colors="option.value" ng-switch-when="color"></div>

							<button
							type="button"
							class="btn btn-default"
							ng-model="option.value"
							ng-change="$apply()"
							bs-options="opt for opt in option.values()" bs-select ng-switch-when="list">
							Action <span class="caret"></span>
							</button>

						<input type="text" min="0" class="form-control" ng-model="option.value" ng-switch-default="ng-switch-default"></input>

					</div>

				</li>
			</ul>
		</div>

		<div class="col-lg-9">
			<div class="chart-resize">
				<div ng-show="model.isValid()" id="chart" chart></div>
			</div>
			<div class="text-muted text-center" ng-show="!model.isValid()">
				<!--<i class="fa fa-hand-o-up breath-right"></i>-->
				<h4><span ng-bind-html="model.instruction()"></span></h4>
			</div>

		</div>

	</div>
</div>

</section>

<section class="dark" ng-show="model.isValid()" style="padding-bottom:50px">

	<div class="container">

		<div>

			<div id="export" class="row">

				<div class="col-lg-3">
					<h3><i class="fa fa-download breath-right"></i>Download</h3>
					<downloader></downloader>
				</div>

				<div class="col-lg-9">
					<h3 ng-show="!chart.isDrawing()" id="data"><i class="fa fa-code breath-right"></i>Embed SVG Code</h3>
					<h3 ng-show="chart.isDrawing()">loading <span class="glyphicon glyphicon-refresh spinning"></span></h3>
					<coder ng-show="!chart.isDrawing()"></coder>
					<p ng-show="!chart.isDrawing()" class="light">Copy the snippet above into your HTML code to embed the visualization
						<a class="pull-right" id="copy-button" copy-button data-clipboard-target="source" data-container="body"><i class="fa fa-clipboard"></i></a>
					</p>
				</div>

			</div>
		</div>

	</div>
</section>
</div>
